App.module.Language = Ext.extend(App.Module, {
	name: 'Languages'
	,init: function(){
		this.launcher = {
			text: this.name
			,handler: this.showWin
			,scope: this
		};
	}
	,getTreePanel: function(){
		if(this.treePanel) return this.treePanel;
		
		var o = this;
		this.treePanel = new Ext.tree.TreePanel({
			region: 'west'
			,title: 'Languages'
			,collapsible: true
			,split: true
			,width: 120
			,useArrows: true
			,enableDD: true
			,root: {
				text: 'Languages'
				,expanded: true
			}
			,loader: new Ext.tree.TreeLoader({
				directFn: API.language.loadTree	
			})
			,tbar: []
			,plugins: [
				new App.module.Language.Add()
				,new App.module.Language.Update()
				,new App.module.Language.Delete()
			]
			,selModel: new Ext.tree.DefaultSelectionModel({
				listeners: {
					selectionchange: function(sm, node){
						o.loadPhrase();
					}	
				}	
			})
			,listeners: {
				startdrag: function(tree, node, e){
					var oldIndex = node.parentNode.indexOf(node);
					node.oldIndex = oldIndex;
				}
				,movenode: function(tree, node, oldParent, newParent, index){
					if(index == node.oldIndex) return;
					
					var data = {
						id: node.id
						,index: index
						,oldIndex: node.oldIndex
					};
					
					API.language.reorder(data);
				}	
			}
		});
		
		var treeEditor = new Ext.tree.TreeEditor(
			this.treePanel
			,{
				selectOnFocus: true	
			},{
				ignoreNoChange: true
				,listeners: {
					complete: function(editor, newValue){
						var data = {
							id: editor.editNode.id
							,name: newValue	
						};
						API.language.update(data);		
					}
				}	
			}
		);
		
		return this.treePanel;	
	}
	,getCodePanel: function(){
		if(this.codePanel) return this.codePanel;
		
		var store = new Ext.data.DirectStore({
			proxy: new Ext.data.DirectProxy({
				directFn: API.language.loadCode	
			})
			,autoLoad: true
			,reader: new Ext.data.JsonReader({
				root: 'rows'
				,totalProperty: 'total'
			}, ['id', 'name', 'description'])
			,sortInfo: {
				field: 'name'
				,direction: 'ASC'	
			}
		});
		
		var cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer({
				header: '#'	
			}),{
				header: 'ID'
				,dataIndex: 'id'
				,hidden: true
				,sortable: true
			},{
				header: 'Name'
				,dataIndex: 'name'
				,sortable: true
				,width: 150
				,editor: new Ext.form.TextField({allowBlank: false, selectOnFocus: true})
			},{
				header: 'Description'
				,dataIndex: 'description'
				,sortable: true
				,editor: new Ext.form.TextField({selectOnFocus: true})
			}
		]);
		
		this.codePanel = new App.Grid({
			store: store
			,cm: cm
			,region: 'center'
			,title: 'Code'
			,tbar: []
			,plugins: [
				new App.module.Language.Code.Add()
				,new App.module.Language.Code.Delete()
			]
			,listeners: {
				afteredit: function(o){
					var data = {};
					data.id = o.record.data.id;
					data[o.field] = o.value;
					
					API.language.updateCode(data, function(r){
						o.record.commit();	
					});
				}
			}
		});
		
		var task = new Ext.util.DelayedTask(this.loadPhrase);
		
		this.codePanel.selModel.on('selectionchange', function(){
			//this.loadPhrase();
			task.delay(10, null, this);
		}, this);
		
		return this.codePanel;	
	}
	
	,loadPhrase: function(){
		var codeNode = this.getCodePanel().selModel.getSelected();
		if(!codeNode) return;
		var code_id = codeNode? codeNode.data.id : null;
		
		var treePanel = this.getTreePanel();
		var langNode = treePanel.getSelectionModel().getSelectedNode();
		var lang_id = langNode? langNode.id : null;
		
		this.getPhrasePanel().getStore().load({params: {
			lang_id: lang_id
			,code_id: code_id	
		}});
	}
	
	,getPhrasePanel: function(){
		if(this.phrasePanel) return this.phrasePanel;
		
		var store = new Ext.data.DirectStore({
			proxy: new Ext.data.DirectProxy({
				directFn: API.language.loadPhrase
			})
			,reader: new Ext.data.JsonReader({
				root: 'rows'
				,totalProperty: 'total'
			}, ['lang_id', 'code_id', 'name', 'value', 'index'])
			,sortInfo: {
				field: 'index'
				,direction: 'ASC'	
			}
		});
		
		var cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer({
				header: '#'	
			}),{
				header: 'Language'
				,dataIndex: 'name'
				,sortable: true
				,width: 120
			},{
				header: 'Value'
				,dataIndex: 'value'
				,sortable: true
				,width: 300
				,editor: new Ext.form.TextField({allowBlank: false, selectOnFocus: true})
			}
		]);
		
		this.phrasePanel = new App.Grid({
			store: store
			,cm: cm
			,region: 'east'
			,width: 350
			,split: true
			,collapsible: true
			,title: 'Phrases'
			,listeners: {
				afteredit: function(o){
					var data = {
						lang_id: o.record.data.lang_id
						,code_id: o.record.data.code_id	
					};
					data[o.field] = o.value;
					
					API.language.updatePhrase(data, function(r){
						o.record.commit();
					});	
				}	
			}
		});
		
		return this.phrasePanel;
	}
	,getItems: function(){
		return [
			this.getTreePanel()
			,this.getCodePanel()
			,this.getPhrasePanel()
		];
	}
	,getWin: function(){
		if(!this.win){
			var items = this.getItems();
			this.win = new App.Window({
				id: this.id
				,title: this.name
				,iconCls: this.id + '-16x16'
				,layout: 'border'
				,border: false
				,defaults: {border: true}
				,items: items
			});	
		}
		return this.win;
	}
	,showWin: function(id){
		this.getWin().show(id);	
	}
});

Ext.ns('App.module.Language.Code', 'App.module.Language.Phrase');